<template>
  <div class="container">
    <el-card>
      <div>
        <subjectsSousuoVue :obj="obj" @Choice="Choice" @searchfn="searchfn" />
      </div>

      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <div class="myicon">
          <i class="el-icon-info" />数据一共{{ num }}条
        </div>
        <el-tab-pane label="全部" name="first">
          <questionsListVue ref="QuestionsList" :questions-list="QuestionsList" @ChkState="choice" @Choice="choice1" />
        </el-tab-pane>
        <el-tab-pane label="待审核" name="second">
          <questionsListVue :questions-list="QuestionsList" @Choice="choice1" @ChkState="choice" />
        </el-tab-pane>
        <el-tab-pane label="已审核" name="third">
          <questionsListVue :questions-list="QuestionsList" @Choice="choice1" @ChkState="choice" />
        </el-tab-pane>
        <el-tab-pane label="已拒绝" name="fourth">
          <questionsListVue :questions-list="QuestionsList" @Choice="choice1" @ChkState="choice" />
        </el-tab-pane>
      </el-tabs>

      <!-- 分页 -->
      <div class="pagetool">
        <el-row type="flex" justify="space-between">
          <el-col />
          <el-col :span="8">
            <el-row type="flex" justify="end">
              <el-col>
                <pageTool :total="num" :pagination-page.sync="obj.page" :pagination-pagesize.sync="obj.pagesize" @pageSizeChange="pageSizeChange" @pageChange="pageChange" />
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </div></el-card>

  </div>
</template>

<script>
import { choice } from '@/api/hmmm/questions'
import questionsListVue from '../components/questions-list.vue'
import pageTool from '../components/pageTool.vue'
import subjectsSousuoVue from '../components/subjects-sousuo.vue'

export default {
  components: {
    questionsListVue,
    pageTool,
    subjectsSousuoVue
  },
  data() {
    return {
      activeName: 'first',
      obj: {
        chkState: null, // 过滤审核数据需要的参数
        page: 1,
        pagesize: 10
      },
      QuestionsList: [],
      num: 0 // 数据总数量,

    }
  },
  created() {
    this.choice()
  },
  methods: {
    async choice() {
      const { data } = await choice(this.obj)
      this.QuestionsList = data.items
      this.num = data.counts
    },
    handleClick(tab, event) {
      // console.log(tab)
      this.$nextTick(() => {
        if (tab._props.name === 'second') {
          this.obj.chkState = 0
          this.choice()
        }
        if (tab._props.name === 'third') {
          this.obj.chkState = 1
          this.choice()
        }
        if (tab._props.name === 'fourth') {
          this.obj.chkState = 2
          this.choice()
        }
        if (tab._props.name === 'first') {
          this.obj.chkState = null
          this.choice()
        }
      })
    },
    searchfn(items) {
      // console.log(items)
      this.QuestionsList = items
      this.num = items.length
    },
    Choice(obj) {
      // console.log(obj)
      this.choice(obj)
    },
    pageSizeChange(pageSize) {
      this.obj.pagesize = pageSize
      this.choice(this.obj)
    },
    pageChange(page) {
      this.obj.page = page
      this.choice(this.obj)
    },
    choice1() {
      this.obj.page = Math.ceil((this.num - 1) / this.obj.pagesize)
      this.choice()
    }
  }
}
</script>

<style lang="scss" scoped >
.container{
  padding: 10px 10px;
}
.myicon{
  padding: 8px 16px;
  margin-bottom: 15px;
  height: 35px;
  background-color: #f4f4f5;
    color: #909399;
}
</style>
<!-- questionType:题目类型
difficulty：题目难度
chstate：审核状态   0(待审核)  1(已审核)
publishstate：上下架  0  1 -->
